<template>
    <el-button @click="openModal()" style="width: 100%;">添加套管</el-button>
    <a-table :columns="columns" :data-source="dataSource" :scroll="{ x: 1000 }">
        <template #bodyCell="{ column, text, record }">
            <template v-if="['outerDiameter', 'bottom', 'top', 'weight'].includes(column.dataIndex)">
                <div>
                    <a-input-number v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-if="['name'].includes(column.dataIndex)">
                <div>
                    <a-input v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <span v-if="editableData[record.id]">
                        <a-typography-link @click="save(record.id)">保存 </a-typography-link>
                        <a @click="dele(record.id)">删除</a>
                        <a-popconfirm title="确定取消吗？" @confirm="cancel(record.id)">
                            <a> 取消</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a @click="edit(record.id)">编辑</a>


                    </span>
                </div>
            </template>
        </template>
    </a-table>


    <!-- 套管选择弹窗 -->
    <el-dialog v-model="show" title=" 套管选择" width="700px" :close-on-click-modal="false" append-to-body>
        <div>
            <el-table :data="casingsList" height="350" style="width: 100%" highlight-current-row ref="singleTableRef"
                @current-change="handleCurrentChange">
                <el-table-column prop="casingId" label="套管编号" width="180" align="center" />
                <el-table-column prop="outerDiameter" label="外径(mm)" width="100" align="center" />
                <el-table-column prop="innerDiameter" label="内径(mm)" align="center" />
                <el-table-column prop="thickness" label="壁厚(mm)" align="center" />
                <el-table-column prop="weight" label="重量(kg/m)" align="center" />
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" v-if="false" @click="add">绑定</el-button>
                <el-button type="primary" v-if="!false" @click="add">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
import { queryList } from "@/api/tool/casing";
import { updateCasing, deleteCasing, changeRed } from "@/api/casing"
import d3DrawStore from '@/store/modules/d3Draw'
import casingStore from '@/store/modules/casingDraw'
const d3Store = d3DrawStore();
const casingDraw = casingStore();
const show = ref(false);
const params = ref({ pageNum: 1, pageSize: 999, sortBy: 'id', searchKey: '' });
const editableData = reactive({});
const dataSource = ref(casingDraw.casingData);
const casingsList = ref([]);
const casingData = ref(
    { outerDiameter: 400, bottom: 1000, top: 0 })
const columns = [
    {
        title: '操作',
        dataIndex: 'operation',
        id: 'operation',
        width: 200,
    }, {
        title: '名称',
        dataIndex: 'name',
        id: 'name',
        width: 150,
    }, {
        title: '外径(mm)',
        dataIndex: 'outerDiameter',
        id: 'outerDiameter',
        width: 150,
    }, {
        title: '内径(mm)',
        dataIndex: 'innerDiameter',
        id: 'innerDiameter',
        width: 150,
    },{
        title: '壁厚(mm)',
        dataIndex: 'thickness',
        id: 'thickness',
        width: 150,
    },
     {
        title: '底部',
        dataIndex: 'bottom',
        id: 'bottom',
        width: 150,
    }, {
        title: '顶部',
        dataIndex: 'top',
        id: 'top',
        width: 150,
    }, {
        title: '重量(kg/m)',
        dataIndex: 'weight',
        id: 'weight',
        width: 150,
    }];
//增
const add = () => {
    console.log(casingData.value)
    casingDraw.addCasingData(casingData.value.outerDiameter, casingData.value.bottom, casingData.value.top);
    casingDraw.saveInitCasings(casingData.value.outerDiameter, casingData.value.top, casingData.value.bottom);

    show.value = false
}
//删
const dele = id => {
    const arrayIndex = dataSource.value.findIndex(item => item.id === id)
    deleteCasing(casingDraw.casing[arrayIndex])
    casingDraw.deleteCasing(arrayIndex);
}
//改
const edit = id => {
    const d3Canvas = d3Store.d3Canvas;
    casingDraw.casingBlack();
    editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
    updateCasing(casingDraw.casing[id], d3Canvas, editableData[id].outerDiameter, editableData[id].top, editableData[id].bottom);
};
const save = id => {
    editableData[id].innerDiameter = (editableData[id].outerDiameter - 10).toFixed(2);
    const d3Canvas = d3Store.d3Canvas;
    if (casingDraw.casing.length == 0) {
        initOneDemo()
    }
    casingDraw.casingBlack();
    Object.assign(dataSource.value.filter(item => id === item.id)[0], editableData[id]);
    updateCasing(casingDraw.casing[id], d3Canvas, editableData[id].outerDiameter, editableData[id].top, editableData[id].bottom);
    delete editableData[id];
};

const cancel = id => {
    delete editableData[id];
};

//初始化demo
function initOneDemo() {
    for (let i = 0; i < 3; i++) {
        casingDraw.saveInitCasings(dataSource.value[i].outerDiameter, dataSource.value[i].top, dataSource.value[i].bottom);
    }
}
function getCasingsList() {
    queryList(params.value).then((response) => {
        casingsList.value = response.content;
    });
}
function handleCurrentChange(selection) {
    casingData.value.outerDiameter = selection.outerDiameter
}
function openModal() {
    getCasingsList()
    show.value = true;
}
</script>
<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>